<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="系统名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入系统名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="系统分类" prop="category">
        <el-select
          v-model="queryParams.category"
          placeholder="请选择分类"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="item in getIntDictOptions(DICT_TYPE.AGENT_SYSTEM_CATEGORY)"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="系统状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
          <el-option label="在线" value="在线" />
          <el-option label="离线" value="离线" />
          <el-option label="维护中" value="维护中" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['agent:demo:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
        <!-- <el-button
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['agent:demo:export']"
        >
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button> -->
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <div class="demo-grid" v-loading="loading">
      <div v-for="demo in list" :key="demo.id" class="demo-card" @click="handleCardClick(demo)">
        <div class="demo-header">
          <i :class="demo.icon"></i>
          <div class="demo-status">
            <div class="status-dot" :class="getStatusClass(demo.status)"></div>
          </div>
        </div>

        <h3 class="demo-name">{{ demo.name }}</h3>
        <!-- <p class="demo-description">{{ demo.description }}</p> -->

        <div class="demo-info">
          <!-- <div class="info-item">
            <span class="label">版本:</span>
            <span class="value">{{ demo.version || '-' }}</span>
          </div> -->
          <div class="info-item">
            <dict-tag :type="DICT_TYPE.AGENT_SYSTEM_CATEGORY" :value="demo.category" />
          </div>
          <div class="info-item">
            <span class="label">状态:</span>
            <el-tag :type="getStatusType(demo.status)" size="small">
              {{ demo.status || '未知' }}
            </el-tag>
          </div>
          <div class="info-item">
            <span class="label">账号:</span>
            <span class="value">{{ demo.username || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="label">密码:</span>
            <span class="value">{{ demo.password || '-' }}</span>
          </div>
        </div>

        <div class="demo-actions" @click.stop>
          <el-button @click="openForm('update', demo.id)" v-hasPermi="['agent:demo:update']">
            <Icon icon="ep:edit" />编辑
          </el-button>
          <el-button
            type="danger"
            @click="handleDelete(demo.id)"
            v-hasPermi="['agent:demo:delete']"
          >
            <Icon icon="ep:delete" />删除
          </el-button>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <DemoForm ref="formRef" @success="getList" />
</template>

<script setup lang="ts">
import { DemoApi, type DemoVO } from '@/api/agent/manage/demo'
import download from '@/utils/download'
import DemoForm from './DemoForm.vue'

import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
/** 演示系统 列表 */
defineOptions({ name: 'Demo' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<DemoVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 12, // 卡片布局，每页显示12个
  createTime: [],
  name: undefined,
  description: undefined,
  category: undefined,
  status: undefined,
  version: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await DemoApi.getDemoPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await DemoApi.deleteDemo(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await DemoApi.exportDemo(queryParams)
    download.excel(data, '演示系统.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 打开演示系统 */
const openDemo = (demo: DemoVO) => {
  if (demo.status === '在线') {
    window.open(demo.url, '_blank')
    message.success(`正在打开 ${demo.name}`)
  } else {
    message.warning('系统当前不在线，无法访问')
  }
}

/** 获取状态样式类 */
const getStatusClass = (status: string) => {
  const classMap: Record<string, string> = {
    在线: 'online',
    离线: 'offline',
    维护中: 'maintenance'
  }
  return classMap[status] || 'offline'
}

/** 获取状态类型 */
const getStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    在线: 'success',
    离线: 'danger',
    维护中: 'warning'
  }
  return typeMap[status] || 'info'
}

/** 初始化 **/
onMounted(() => {
  getList()
})

/** 卡片点击处理 */
const handleCardClick = async (demo: DemoVO) => {
  if (demo.status !== '在线') {
    message.warning('系统当前不在线，无法访问')
    return
  }

  try {
    await message.confirm(`确定要访问演示系统 "${demo.name}" 吗？`, '访问确认', {
      confirmButtonText: '确定访问',
      cancelButtonText: '取消',
      type: 'info'
    })

    window.open(demo.url, '_blank')
    message.success(`正在打开 ${demo.name}`)
  } catch {
    // 用户取消操作
  }
}
</script>

<style lang="scss" scoped>
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); // 从350px改为175px
  gap: 12px; // 从24px改为12px
  margin-bottom: 20px;
}

.demo-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(229, 231, 235, 0.8);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer; // 添加鼠标指针样式

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px; // 从4px改为2px
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover {
    transform: translateY(-4px) scale(1.01); // 缩小hover效果
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); // 缩小hover阴影
    border-color: rgba(102, 126, 234, 0.3);

    &::before {
      opacity: 1;
    }
  }

  .demo-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px; // 从24px改为12px
    position: relative;

    .demo-icon {
      font-size: 36px; // 从72px改为36px
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 0 auto;
      filter: drop-shadow(0 1px 2px rgba(102, 126, 234, 0.2)); // 缩小阴影
    }

    .demo-status {
      position: absolute;
      top: -4px; // 从-8px改为-4px
      right: -4px; // 从-8px改为-4px

      .status-dot {
        width: 12px; // 从16px改为12px
        height: 12px; // 从16px改为12px
        border-radius: 50%;
        border: 2px solid white; // 从3px改为2px
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); // 缩小阴影

        &.online {
          background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
          animation: pulse-green 2s infinite;
        }

        &.offline {
          background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
          animation: pulse-red 2s infinite;
        }

        &.maintenance {
          background: linear-gradient(135deg, #e6a23c 0%, #ebb563 100%);
          animation: pulse-orange 2s infinite;
        }
      }
    }
  }

  .demo-name {
    margin: 0 0 8px 0; // 从16px改为8px
    color: #1f2937;
    font-size: 16px; // 从20px改为16px
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.3;
  }

  .demo-description {
    color: #6b7280;
    margin-bottom: 12px; // 从24px改为12px
    line-height: 1.6;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px; // 从14px改为12px
    background: rgba(249, 250, 251, 0.8);
    padding: 6px; // 从12px改为6px
    border-radius: 6px; // 从8px改为6px
    border-left: 2px solid #e5e7eb; // 从3px改为2px
  }

  .demo-info {
    margin-bottom: 14px; // 从28px改为14px
    text-align: left;
    background: rgba(248, 250, 252, 0.6);
    padding: 8px; // 从16px改为8px
    border-radius: 8px; // 从12px改为8px
    border: 1px solid rgba(229, 231, 235, 0.6);

    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px; // 从12px改为6px
      font-size: 12px; // 从14px改为12px
      padding: 4px 0; // 从8px改为4px
      border-bottom: 1px solid rgba(229, 231, 235, 0.4);

      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }

      .label {
        color: #6b7280;
        font-weight: 500;
        min-width: 50px; // 从60px改为50px
      }

      .value {
        color: #1f2937;
        font-weight: 600;
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
        background: rgba(255, 255, 255, 0.8);
        padding: 2px 4px; // 从4px 8px改为2px 4px
        border-radius: 4px; // 从6px改为4px
        font-size: 11px; // 从13px改为11px
      }
    }
  }

  .demo-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;

    .el-button {
      flex: 1;
      font-weight: 600;
      border-radius: 6px;
      padding: 6px 8px;
      font-size: 13px;
      transition: all 0.3s ease;

      &.el-button--primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4); // 减小阴影

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 3px 10px rgba(102, 126, 234, 0.6); // 减小hover阴影
        }
      }

      &.el-button--danger {
        background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
        border: none;
        color: white;
        box-shadow: 0 2px 6px rgba(245, 108, 108, 0.4); // 减小阴影

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 3px 10px rgba(245, 108, 108, 0.6); // 减小hover阴影
        }
      }

      &:not(.el-button--primary):not(.el-button--danger) {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border: 1px solid #cbd5e1;
        color: #475569;

        &:hover {
          background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
          transform: translateY(-1px);
          box-shadow: 0 3px 10px rgba(71, 85, 105, 0.2); // 减小hover阴影
        }
      }
    }
  }
}

@keyframes pulse-green {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(103, 194, 58, 0);
  }
}

@keyframes pulse-red {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 108, 108, 0);
  }
}

@keyframes pulse-orange {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(230, 162, 60, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(230, 162, 60, 0);
  }
}
</style>
